<template>
	<view class="meeting-rooms">
		<!-- 顶部导航栏 -->
		<view class="header">
			<!-- <view class="location" @tap="showLocationPicker">
				<u-icon name="map-fill" size="32" color="#3c9cff"></u-icon>
				<text class="location-text">金岱智慧产业园一期</text>
				<u-icon name="arrow-down" size="24"></u-icon>
			</view> -->
			<view class="booking-record" @tap="goToRecord">
				<text>预订记录</text>
			</view>
		</view>

		<!-- 会议室列表 -->
		<view class="room-list">
			<view class="room-card" v-for="(room, index) in rooms" :key="index">
				<!-- 会议室图片 -->
				<image :src="room.image" mode="aspectFill" class="room-image" @tap="previewImage(room.image)" />

				<!-- 会议室信息 -->
				<view class="room-info">
					<view class="room-name">{{ room.name }}</view>
					<view class="room-capacity">
						<text class="capacity-text">可容纳{{ room.capacity }}人</text>
					</view>

					<!-- 价格信息 -->
					<view class="price-section">
						<text class="price">{{ room.price }}</text>
						<text class="unit">元/半天</text>
					</view>

					<!-- 会员优惠信息 -->
					<view class="member-discount" @tap="gotoCall">
						联系人：刘经理
						17894561237
						<u-icon name="phone" size="32" color="#3c9cff" @tap="makeCall(room.phone)"></u-icon>
						<!--  <view class="discount-info">
              <u-icon name="star-fill" color="#f0ad4e" size="24"></u-icon>
              <text>{{ room.price }}元/半天 · 认证用户享优惠</text>
            </view>
            <view class="auth-btn">
              去认证
              <u-icon name="arrow-right" size="24"></u-icon>
            </view> -->
					</view>

					<!-- 地址信息 -->
					<view class="address-section">
						<view class="address">
							<u-icon name="map" size="24" color="#909399"></u-icon>
							<text>{{ room.address }}</text>
						</view>
						<view class="actions">

							<!--   <u-icon 
                name="map" 
                size="40" 
                color="#3c9cff"
                @tap="navigate(room.location)"
              ></u-icon> -->
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 位置选择弹窗 -->
		<u-popup v-model="showLocation" mode="bottom">
			<view class="location-picker">
				<view class="picker-header">
					<text>选择园区</text>
					<u-icon name="close" @tap="showLocation = false"></u-icon>
				</view>
				<scroll-view scroll-y class="location-list">
					<view class="location-item" v-for="(item, index) in locations" :key="index"
						@tap="selectLocation(item)">
						{{ item.name }}
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'

	// 位置选择相关
	const showLocation = ref(false)
	const locations = ref([
		{ id: 1, name: '金岱智慧产业园一期' },
		{ id: 2, name: '金岱智慧产业园二期' },
		{ id: 3, name: '金岱智慧产业园三期' }
	])

	// 会议室数据
	const rooms = ref([
		{
			id: 1,
			name: '孵化器园区路演大厅',
			capacity: 100,
			price: 800,
			image: 'https://www.guibook.com/upload/image/202005/15908056758211805.jpg',
			address: '管城经开区文治路17号8号楼1单元4楼路演大厅',
			phone: '12345678901',
			location: {
				latitude: 30.123456,
				longitude: 120.123456
			}
		},
		{
			id: 2,
			name: '孵化器园区路演大厅',
			capacity: 100,
			price: 800,
			image: 'https://www.guibook.com/upload/image/202005/15908056758211805.jpg',
			address: '管城经开区文治路17号8号楼1单元4楼路演大厅',
			phone: '12345678901',
			location: {
				latitude: 30.123456,
				longitude: 120.123456
			}
		}
	])

	// 方法
	const showLocationPicker = () => {
		showLocation.value = true
	}

	const selectLocation = (location : any) => {
		console.log('选择园区:', location)
		showLocation.value = false
	}

	const goToRecord = () => {
		uni.navigateTo({
			url: '/pages/booking/record'
		})
	}

	const previewImage = (url : string) => {
		uni.previewImage({
			urls: [url]
		})
	}

	const gotoCall = () => {
		uni.makePhoneCall({
			phoneNumber: '17894561237', // 这里填写要拨打的手机号
			success: () => {
				console.log('拨打电话成功');
			},
			fail: (err) => {
				console.error('拨打电话失败', err);
			}
		});
	}

	const makeCall = (phone : string) => {

	}

	const navigate = (location : any) => {
		uni.openLocation({
			latitude: location.latitude,
			longitude: location.longitude,
			name: '会议室位置',
			address: '详细地址'
		})
	}
</script>

<style lang="scss">
	.meeting-rooms {
		min-height: 100vh;
		background-color: #f5f5f5;
	}

	.header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #fff;

		.location {
			display: flex;
			align-items: center;
			gap: 10rpx;

			.location-text {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.booking-record {
			color: #3c9cff;
			font-size: 28rpx;
		}
	}

	.room-list {
		padding: 20rpx;
	}

	.room-card {
		background-color: #fff;
		border-radius: 12rpx;
		margin-bottom: 20rpx;
		overflow: hidden;

		.room-image {
			width: 100%;
			height: 400rpx;
		}

		.room-info {
			padding: 20rpx;

			.room-name {
				font-size: 32rpx;
				font-weight: bold;
				margin-bottom: 10rpx;
			}

			.room-capacity {
				margin-bottom: 16rpx;

				.capacity-text {
					font-size: 28rpx;
					color: #3c9cff;
				}
			}

			.price-section {
				margin-bottom: 16rpx;

				.price {
					font-size: 40rpx;
					color: #ff4d4f;
					font-weight: bold;
				}

				.unit {
					font-size: 24rpx;
					color: #ff4d4f;
				}
			}

			.member-discount {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: #fff7e6;
				padding: 16rpx 20rpx;
				border-radius: 8rpx;
				margin-bottom: 16rpx;

				.discount-info {
					display: flex;
					align-items: center;
					gap: 10rpx;
					font-size: 24rpx;
					color: #666;
				}

				.auth-btn {
					display: flex;
					align-items: center;
					color: #f0ad4e;
					font-size: 24rpx;
				}
			}

			.address-section {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.address {
					display: flex;
					align-items: center;
					gap: 10rpx;
					flex: 1;
					font-size: 24rpx;
					color: #666;
				}

				.actions {
					display: flex;
					gap: 20rpx;
				}
			}
		}
	}

	.location-picker {
		background-color: #fff;
		border-radius: 24rpx 24rpx 0 0;

		.picker-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #eee;

			text {
				font-size: 32rpx;
				font-weight: bold;
			}
		}

		.location-list {
			max-height: 60vh;

			.location-item {
				padding: 30rpx;
				font-size: 28rpx;
				border-bottom: 1rpx solid #eee;

				&:active {
					background-color: #f5f5f5;
				}
			}
		}
	}
</style>